<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import router from '@/router';
import Input from '@/components/common/Input.vue';
import Button from '@/components/common/Button.vue';
import { sendRegisterCode, register } from '@/apis/user';
import { RegisterType } from '@/enums/user'
const codeError = ref<boolean>(false)
const mobilePhoneOrEmail = ref<string>('')
const code = ref<string>('')
const time = ref<number>(60)
const timer = ref<number>(0)
const registerType = ref<RegisterType>()
const errorText = ref<string>('')
const getRegisterTypeText = computed(() => {
    if (registerType.value === RegisterType.Phone) {
        return '验证您的手机号码'
    } else {
        return '邮箱验证'
    }
})
const getRegisterDescriptionText = computed(() => {
    if (registerType.value === RegisterType.Phone) {
        return `请输入您在手机 ${mobilePhoneOrEmail.value} 收到的6位验证码，验证码30分钟有效。`
    } else {
        return `6 位数验证码已发送至您的 ${mobilePhoneOrEmail.value}。请在 30 分钟内输入。`
    }
})
const submit = async () => {
    if (code.value.length !== 6) {
        codeError.value = true
        errorText.value = '请填写6位数字验证码'
        return
    }
    try {
        await register({
            code: code.value,
            tel: mobilePhoneOrEmail.value,
            password: ''
        })
    } catch (error: any) {
        codeError.value = true
        errorText.value = error.msg
    }

}
const sendCode = async () => {
    if (time.value) {
        return
    }
    time.value = 60
    timer.value = setInterval(() => {
        if (time.value > 0) {
            time.value--
        } else {
            clearInterval(timer.value)
        }
    }, 1000)
    await sendRegisterCode({ tel: mobilePhoneOrEmail.value });

}
const focusFn = () => {
    codeError.value = false
}
onMounted(() => {
    timer.value = setInterval(() => {
        if (time.value > 0) {
            time.value--
        } else {
            clearInterval(timer.value)
        }
    }, 1000)
    registerType.value = router.currentRoute.value.query.type as RegisterType
    mobilePhoneOrEmail.value = router.currentRoute.value.query.mobilePhoneOrEmail as string
})
</script>
<template>
    <div class=" min-h-[100vh] overflow-auto flex flex-col justify-between sm:items-center">
        <div class="sm:flex justify-center flex-col items-center">
            <div class="sm:px-[24px] sm:pt-[80px] sm:pb-[26px] w-full sm:w-[425px] sm:h-[calc(100%-80px-48px-140px)]">
                <div
                    class="sm:border-solid sm:h-[100%] sm:border-[1px] h-[calc(100%-200px)] sm:border-[#EDEDED] dark:sm:border-[#333B47] sm:rounded-[24px] sm:p-[40px] w-[100%] box-border px-[24px] pt-[8px] sm:pb-[120px]">
                    <div class="h-[28px] mb-[20px] sm:mb-[32px] mt-[20px] sm:mt-0">
                        <span class="iconfont text-[24px] cursor-pointer text-primary-400 icon-uhx"></span>
                        <span class="text-primary-400 text-[24px] ml-[8px] font-bold">UHX</span>
                    </div>
                    <div
                        class="sm:text-[32px] text-[28px] font-bold mb-[14px] sm:mb-[16px] break-all dark:text-[#EAECEF]">
                        {{ getRegisterTypeText }}
                    </div>
                    <div class="mb-[24px] text-[#757575] text-[14px] sm:text-[16px] break-all">{{
                        getRegisterDescriptionText }}
                    </div>
                    <div class="text-[14px] text-[#909090] sm:text-black dark:sm:text-[#EAECEF] dark:text-[#848E9C]">验证码
                    </div>
                    <div class=" relative mt-[6px]">
                        <Input @focus="focusFn" v-model="code" maxlength="6" type="text"
                            class=" tracking-[2px] pr-[110px]" placeholder=""
                            :class="[codeError ? 'border-[#F6465D]' : 'border-[#EDEDED]']" />
                        <div :class="[time > 0 ? 'block' : 'hidden']"
                            class="text-[14px] absolute w-[110px] right-0 text-center top-0 h-full leading-[48px] text-[#9c9c9c]">
                            验证码已发送
                        </div>
                        <div @click="sendCode"
                            class="text-[14px] absolute w-[110px] cursor-pointer right-0 text-center top-0 h-full leading-[48px] text-primary-400"
                            :class="[time <= 0 ? 'block' : 'hidden']">重新发送</div>
                    </div>
                    <div class="text-[#F6465D] text-[12px] sm:text-[14px] mt-[4px]"
                        :class="[codeError ? 'block' : 'hidden']">{{ errorText }}</div>
                    <Button class="mt-[24px] h-[48px] leading-[48px] text-[16px]" @click="submit">继续</Button>
                    <div
                        class="mt-[20px] sm:text-center  active:text-primary-300 select-none text-primary-500 text-[16px] font-bold cursor-pointer sm:hover:text-primary-300">
                        未收到验证码?</div>
                </div>
            </div>
        </div>
        <div
            class="h-[70px] sm:w-[345px] w-full box-border flex items-center sm:px-0 justify-between px-[60px] text-[14px] text-[#909090]">
            <div class="flex items-center">
                <span class="iconfont icon-yuyan text-black"></span>
                <div class="ml-[6px]">简体中文</div>
            </div>
            <div>服务协议</div>
            <div>隐私声明</div>
        </div>
    </div>
</template>
<style scoped></style>